import { View } from '@tarojs/components'
import F2Canvas from 'taro-f2-react'
import { Chart, Interval, Axis, TextGuide } from '@antv/f2'

interface IBarChartsProps {
  id?: string
  data?: any[]
  coord?: any
  fieldNames?: {
    [key: string]: string
  }
  fontSize?: number
  color?: any
}

const IBarChartsIndex: React.FC<IBarChartsProps> = props => {
  const {
    id,
    data = [],
    coord = {},
    fieldNames = { label: 'name', value: 'totalNum' },
    // color = 'l(90) 0:#3E73FE 1:#529CFE',
    color = '#7c86b4',
    fontSize = 14
  } = props

  const sourceData =
    data?.map(item => ({
      ...item,
      [fieldNames.value]: parseInt(item[fieldNames.value])
    })) || []

  return (
    <View style={{ width: '100%', height: '260px' }} className='chart_body'>
      {sourceData.length > 0 ? (
        <F2Canvas id={id}>
          <Chart
            data={sourceData}
            coord={coord}
            scale={{
              sales: {
                tickCount: 5
              }
            }}
            // label={{
            //   visible: true,
            //   position: 'top' // option: middle / top / bottom
            // }}
          >
            <Axis field={fieldNames.label} style={{ label: { fontSize } }} />
            <Axis field={fieldNames.value} />
            <Interval
              x={fieldNames.label}
              y={fieldNames.value}
              color={color}
              adjust='stack'
            />
            {sourceData.map(item => {
              return (
                <TextGuide
                  key={item[fieldNames.label]}
                  records={[item]}
                  onClick={ev => {}}
                  content={`${item[fieldNames.value]}`}
                  style={{
                    fill: '#566092',
                    fontSize: '24px'
                  }}
                  offsetY={-10}
                  offsetX={-4}
                />
              )
            })}
          </Chart>
        </F2Canvas>
      ) : null}
    </View>
  )
}

export default IBarChartsIndex
